<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />
	<!-- uncomment 'base' to view this page without external files
	<base href="http://jquery-border-layout.googlecode.com/svn/trunk/" />
	-->

	<title>Complex Layout Demo</title>

	<!-- DEMO styles - specific to this page -->
	<link rel="stylesheet" type="text/css" href="complex.css" />
	<!--[if lte IE 7]>
		<style type="text/css"> body { font-size: 85%; } </style>
	<![endif]-->

	<!-- DEMO scripts - specific to this page -->
	<script type="text/javascript" src="complex.js"></script>

	<!-- REQUIRED scripts for layout widget -->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.layout.js"></script>

	<!-- OPTIONAL ui.draggable is required to resize panes -->
	<script type="text/javascript" src="ui.core.js"></script>
	<script type="text/javascript" src="ui.draggable.js"></script>

	<!-- OPTIONAL animation effects for opening/closing panes -->
	<script type="text/javascript" src="effects.core.js"></script>
	<script type="text/javascript" src="effects.slide.js"></script>
	<script type="text/javascript" src="effects.drop.js"></script>
	<script type="text/javascript" src="effects.scale.js"></script>

	<!-- FUTURE REFERENCE - ACCESS TO EXTERNAL LIBRARIES
	<script type="text/javascript" src="http://jquery-border-layout.googlecode.com/svn/trunk/jquery.layout.js"></script>
	<script type="text/javascript" src="http://ui.jquery.com/js/jquery.js"></script>
	<script type="text/javascript" src="http://ui.jquery.com/js/ui.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
	<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
	<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
	<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
	<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.drop.js"></script>
	<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.scale.js"></script>
	<link rel="stylesheet" type="text/css" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" />
	-->

<script type="text/javascript">
/*
 * complex.html
 *
 * This is a demonstration page for the jQuery layout widget
 *
 *	NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
 */

	var outerLayout, innerLayout;

	/*
	*#######################
	*     ON PAGE LOAD
	*#######################
	*/
	$(document).ready( function() {
		// create the OUTER LAYOUT
		outerLayout = $("body").layout( layoutSettings_Outer );

		/*******************************
		 ***  CUSTOM LAYOUT BUTTONS  ***
		 *******************************
		 *
		 * Add SPANs to the east/west panes for customer "close" and "pin" buttons
		 *
		 * COULD have hard-coded span, div, button, image, or any element to use as a 'button'...
		 * ... but instead am adding SPANs via script - THEN attaching the layout-events to them
		 *
		 * CSS will size and position the spans, as well as set the background-images
		 */

		// BIND events to hard-coded buttons in the NORTH toolbar
		outerLayout.addToggleBtn( "#tbarToggleNorth", "north" );
		outerLayout.addOpenBtn( "#tbarOpenSouth", "south" );
		outerLayout.addCloseBtn( "#tbarCloseSouth", "south" );
		outerLayout.addPinBtn( "#tbarPinWest", "west" );
		outerLayout.addPinBtn( "#tbarPinEast", "east" );

		// save selector strings to vars so we don't have to repeat it
		// must prefix paneClass with "body > " to target ONLY the outerLayout panes
		var westSelector = "body > .ui-layout-west"; // outer-west pane
		var eastSelector = "body > .ui-layout-east"; // outer-east pane

		 // CREATE SPANs for pin-buttons - using a generic class as identifiers
		$("<span></span>").addClass("pin-button").prependTo( westSelector );
		$("<span></span>").addClass("pin-button").prependTo( eastSelector );
		// BIND events to pin-buttons to make them functional
		outerLayout.addPinBtn( westSelector +" .pin-button", "west");
		outerLayout.addPinBtn( eastSelector +" .pin-button", "east" );

		 // CREATE SPANs for close-buttons - using unique IDs as identifiers
		$("<span></span>").attr("id", "west-closer" ).prependTo( westSelector );
		$("<span></span>").attr("id", "east-closer").prependTo( eastSelector );
		// BIND layout events to close-buttons to make them functional
		outerLayout.addCloseBtn("#west-closer", "west");
		outerLayout.addCloseBtn("#east-closer", "east");



		/* Create the INNER LAYOUT - nested inside the 'center pane' of the outer layout
		 * Inner Layout is create by createInnerLayout() function - on demand
		 *
			innerLayout = $("div.pane-center").layout( layoutSettings_Inner );
		 *
		 */


		// DEMO HELPER: prevent hyperlinks from reloadin page when 'base.href' is set
		$("a").each(function () {
			var path = document.location.href;
			if (path.substr(path.length-1)=="#") path = path.substr(0,path.length-1);
			if (this.href.substr(this.href.length-1) == "#") this.href = path +"#";
		});

	});


	/*
	*#######################
	* INNER LAYOUT SETTINGS
	*#######################
	*
	* These settings are set in 'list format' - no nested data-structures
	* Default settings are specified with just their name, like: fxName:"slide"
	* Pane-specific settings are prefixed with the pane name + 2-underscores: north__fxName:"none"
	*/
	layoutSettings_Inner = {
		applyDefaultStyles:				true // basic styling for testing & demo purposes
	,	fxName:							"slide" // do not confuse this with "slidable" option!
	,	fxSpeed:						"slow"
	,	north__fxName:					"none"
	,	south__fxName:					"none"
	,	spacing_closed:					14
	,	north__spacing_closed:			8
	,	south__spacing_closed:			8
	,	north__togglerLength_closed:	-1 // = 100% - so cannot 'slide open'
	,	south__togglerLength_closed:	-1
	//,	initClosed:						true
	};


	/*
	*#######################
	* OUTER LAYOUT SETTINGS
	*#######################
	*
	* This configuration illustrates how extensively the layout can be customized
	* ALL SETTINGS ARE OPTIONAL - and there are more available than shown below
	*
	* These settings are set in 'json format' - ALL data must be in a nested data-structures
	* All default settings (applied to all panes) go inside the defaults:{} key
	* Pane-specific settings go inside their keys: north:{}, south:{}, center:{}, etc
	*/
	var layoutSettings_Outer = {
		name: "outerLayout" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
		// options.defaults apply to ALL PANES - but overridden by pane-specific settings
	,	defaults: {
			size:					"auto"
		,	minSize:				50
		,	paneClass:				"pane" 		// default = 'ui-layout-pane'
		,	resizerClass:			"resizer"	// default = 'ui-layout-resizer'
		,	togglerClass:			"toggler"	// default = 'ui-layout-toggler'
		,	buttonClass:			"button"	// default = 'ui-layout-button'
		,	contentSelector:		".content"	// inner div to auto-size so only it scrolls, not the entire pane!
		,	contentIgnoreSelector:	"span"		// 'paneSelector' for content to 'ignore' when measuring room for content
		,	togglerLength_open:		35			// WIDTH of toggler on north/south edges - HEIGHT on east/west edges
		,	togglerLength_closed:	35			// "100%" OR -1 = full height
		,	togglerTip_open:		"Close This Pane"
		,	togglerTip_closed:		"Open This Pane"
		,	resizerTip:				"Resize This Pane"
		,	fxName:					"slide"		// none, slide, drop, scale
		,	fxSpeed:				"slow"		// slow, normal, fast, 1000, nnn
	}
	,	north: {
			spacing_open:			1			// cosmetic spacing
		,	togglerLength_open:		0			// HIDE the toggler button
		,	togglerLength_closed:	-1			// "100%" OR -1 = full width of pane
		,	resizable: 				false
		,	slidable:				false
		,	fxName:					"none"
		}
	,	south: {
			maxSize:				200
		,	spacing_closed:			0			// HIDE resizer & toggler when 'closed'
		,	slidable:				false		// REFERENCE - cannot slide if spacing_closed = 0
		,	initHidden:				true
		,	onopen:					function () { alert("South pane was opened"); }
		,	onclose:				function () { alert("South pane was closed"); }
		,	onresize:				function () { alert("South pane was resized"); }
		}
	,	west: {
			size:					250
		,	spacing_closed:			21			// wider space when closed
		,	togglerLength_closed:	21			// make toggler 'square' - 21x21
		,	togglerAlign_closed:	"top"		// align to top of resizer
		,	togglerLength_open:		0			// NONE - using custom togglers INSIDE west-pane
		,	togglerTip_open:		"Close West Pane"
		,	togglerTip_closed:		"Open West Pane"
		,	resizerTip_open:		"Resize West Pane"
		,	slideTrigger_open:		"click" 	// default
		,	initClosed:				true
		}
	,	east: {
			size:					250
		,	spacing_closed:			21			// wider space when closed
		,	togglerLength_closed:	21			// make toggler 'square' - 21x21
		,	togglerAlign_closed:	"top"		// align to top of resizer
		,	togglerLength_open:		0 			// NONE - using custom togglers INSIDE east-pane
		,	togglerTip_open:		"Close East Pane"
		,	togglerTip_closed:		"Open East Pane"
		,	resizerTip_open:		"Resize East Pane"
		,	slideTrigger_open:		"mouseover"
		,	fxName:					"drop"
		,	fxSpeed:				"normal"
		,	initClosed:				true
		}
	,	center: {
			paneSelector:			"#mainContent" 			// sample: use an ID to select pane instead of a class
		,	onresize:				"innerLayout.resizeAll"	// resize INNER LAYOUT when center pane resizes
		}
	};

</script>

</head>
<body>

<div class="ui-layout-west">

	<div class="header">Outer - West</div>

	<div class="content">
		<h3><b>Outer Layout</b></h3>
		<ul>
			<li><a href="#" onClick="outerLayout.toggle('north')">Toggle North</a></li>
			<li><a href="#" onClick="outerLayout.toggle('south')">Toggle South</a></li>
			<li><a href="#" onClick="outerLayout.toggle('west')"> Toggle West</a></li>
			<li><a href="#" onClick="outerLayout.toggle('east')"> Toggle East</a></li>
			<li><a href="#" onClick="outerLayout.hide('north')">Hide North</a></li>
			<li><a href="#" onClick="outerLayout.hide('south')">Hide South</a></li>
			<li><a href="#" onClick="outerLayout.hide('east')"> Hide East</a></li>
			<li><a href="#" onClick="outerLayout.show('east', false)">Unhide East</a></li>
			<li><a href="#" onClick="outerLayout.open('east')"> Open East</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('north', 100); outerLayout.open('north')">  Resize North=100</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('north', 300); outerLayout.open('north')">  Resize North=300</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('north', 10000); outerLayout.open('north')">Resize North=10000</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('south', 100); outerLayout.open('south')">  Resize South=100</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('south', 300); outerLayout.open('south')">  Resize South=300</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('south', 10000); outerLayout.open('south')">Resize South=10000</a></li>
			<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','#FCC')">North Color = Red</a></li>
			<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','#CFC')">North Color = Green</a></li>
			<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','')">    North Color = Default</a></li>
			<li><a href="#" onClick="alert('outerLayout.name = \''+outerLayout.options.name+'\'')">Show Layout Name</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'defaults')">Show Options.Defaults</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'north')">   Show Options.North</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'south')">   Show Options.South</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'west')">    Show Options.West</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'east')">    Show Options.East</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'center')">  Show Options.Center</a></li>
		</ul>
	</div>

	<div class="footer">Automatically positioned footer</div>

</div>

<div class="ui-layout-east">

	<div class="header">Outer - East</div>

	<div class="subhead">I'm a subheader</div>

	<div class="content">
		<h3><b>Inner Layout</b></h3>
		<ul id="createInner">
			<li><a href="#" onClick="createInnerLayout(); return false;">CREATE Inner Layout</a></li>
		</ul>
		<ul id="innerCommands" style="display: none;">
			<li><a href="#" onClick="innerLayout.toggle('north')">Toggle North</a></li>
			<li><a href="#" onClick="innerLayout.toggle('south')">Toggle South</a></li>
			<li><a href="#" onClick="innerLayout.toggle('west')"> Toggle West</a></li>
			<li><a href="#" onClick="innerLayout.toggle('east')"> Toggle East</a></li>
			<li><a href="#" onClick="innerLayout.hide('north')">Hide North</a></li>
			<li><a href="#" onClick="innerLayout.hide('south')">Hide South</a></li>
			<li><a href="#" onClick="innerLayout.hide('west')"> Hide West</a></li>
			<li><a href="#" onClick="innerLayout.hide('east')"> Hide East</a></li>
			<li><a href="#" onClick="innerLayout.show('east')"> Show East</a></li>
			<li><a href="#" onClick="innerLayout.sizePane('north', 50); innerLayout.open('north')">   Resize North=50</a></li>
			<li><a href="#" onClick="innerLayout.sizePane('north', 300); innerLayout.open('north')">  Resize North=300</a></li>
			<li><a href="#" onClick="innerLayout.sizePane('north', 10000); innerLayout.open('north')">Resize North=10000</a></li>
			<li><a href="#" onClick="innerLayout.sizePane('south', 50); innerLayout.open('south')">   Resize South=50</a></li>
			<li><a href="#" onClick="innerLayout.sizePane('south', 300); innerLayout.open('south')">  Resize South=300</a></li>
			<li><a href="#" onClick="innerLayout.sizePane('south', 10000); innerLayout.open('south')">Resize South=10000</a></li>
			<li><a href="#" onClick="innerLayout.panes.north.css('backgroundColor','#FCC')">North Color = Red</a></li>
			<li><a href="#" onClick="innerLayout.panes.north.css('backgroundColor','#CFC')">North Color = Green</a></li>
			<li><a href="#" onClick="innerLayout.panes.north.css('backgroundColor','')">    North Color = Default</a></li>
			<li><a href="#" onClick="alert('innerLayout.name = \''+innerLayout.options.name+'\'')">Show Layout Name</a></li>
			<li><a href="#" onClick="showOptions(innerLayout,'defaults')">Show Options.Defaults</a></li>
			<li><a href="#" onClick="showOptions(innerLayout,'north')">   Show Options.North</a></li>
			<li><a href="#" onClick="showOptions(innerLayout,'south')">   Show Options.South</a></li>
			<li><a href="#" onClick="showOptions(innerLayout,'west')">    Show Options.West</a></li>
			<li><a href="#" onClick="showOptions(innerLayout,'east')">    Show Options.East</a></li>
			<li><a href="#" onClick="showOptions(innerLayout,'center')">  Show Options.Center</a></li>
		</ul>
	</div>

	<div class="subhead">I'm a footer</div>
	<div class="subhead">I'm another footer</div>
	<div class="subhead">Unlimited headers &amp; footers</div>

</div>


<div class="ui-layout-north">
	<div class="header">Outer - North</div>
	<div class="content">
		I only have toggler when 'closed' - I cannot be resized - and I do not 'slide open'
	</div>
	<ul class="toolbar">
		<li id="tbarToggleNorth" class="first"><span></span>Toggle NORTH</li>
		<li id="tbarOpenSouth"><span></span>Open SOUTH</li>
		<li id="tbarCloseSouth"><span></span>Close SOUTH</li>
		<li id="tbarPinWest"><span></span>Pin/Unpin WEST</li>
		<li id="tbarPinEast" class="last"><span></span>Pin/Unpin EAST</li>
	</ul>
</div>


<div class="ui-layout-south">
	<div class="header">Outer - South</div>
	<div class="content">
		<p>I only have a resizer/toggler when 'open'</p>
	</div>
</div>


<div id="mainContent">
	<!-- DIVs for the INNER LAYOUT -->

	<div class="ui-layout-center">
		<h3 class="header">Inner - Center</h3>
		<div class="ui-layout-content">
		
			<p id="createInner2" style="font-weight: bold;"><a href="#" onClick="createInnerLayout(); return false;"
				>Click here to CREATE the Inner Layout</a></p><!-- outerLayout.open('east');  -->

			<p>See the <a href="#" onclick="outerLayout.open('east'); return false;">Outer-East pane</a> for commands to manipulate the Inner Layout</p>

			<p><a href="../demos.html">Go to the Demos page</a></p>

			<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
			<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
			<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
			<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
		</div>
		<div class="footer">Center panes can have headers &amp; footers too</div>
	</div>

	<div class="ui-layout-north"> Inner - North</div>
	<div class="ui-layout-south"> Inner - South</div>
	<div class="ui-layout-west">  Inner - West</div>
	<div class="ui-layout-east">  Inner - East
		<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
		<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
		<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
		<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	</div>

</div>


</body>
</html> 